{% extends "base.html" %}
{% block title %}Post Creation{% endblock %}
{% block body %}
    <div class="row">
        <h1 class="text-center">Create A New Post</h1>
        <form method="POST" action="{{ url_for('.new_post') }}">
            {{ form.hidden_tag() }}
            <div class="form-group">
                {{ form.title.label }}
                {% if form.title.errors %}
                    {% for e in form.title.errors %}
                        <p class="help-block">{{ e }}</p>
                    {% endfor %}
                {% endif %}
                {{ form.title(class_='form-control') }}
            </div>
            <div class="form-group">
                {{ form.type.label }}
                {% if form.type.errors %}
                    {% for e in form.type.errors %}
                        <p class="help-block">{{ e }}</p>
                    {% endfor %}
                {% endif %}
                {{ form.type(class_='form-control') }}
            </div>
            <div id="text_group" class="form-group">
                {{ form.text.label }}
                {% if form.text.errors %}
                    {% for e in form.text.errors %}
                        <p class="help-block">{{ e }}</p>
                    {% endfor %}
                {% endif %}
                {{ form.text(id="editor", class_='form-control') }}
            </div>
            <div id="image_group" class="form-group">
                {{ form.image.label }}
                {% if form.image.errors %}
                    {% for e in form.image.errors %}
                        <p class="help-block">{{ e }}</p>
                    {% endfor %}
                {% endif %}
                {{ form.image(class_='form-control') }}
            </div>
            <div id="video_group" class="form-group">
                {{ form.video.label }}
                {% if form.video.errors %}
                    {% for e in form.video.errors %}
                        <p class="help-block">{{ e }}</p>
                    {% endfor %}
                {% endif %}
                {{ form.video(class_='form-control') }}
            </div>
            <div id="author_group" class="form-group">
                {{ form.author.label }}
                {% if form.author.errors %}
                    {% for e in form.author.errors %}
                        <p class="help-block">{{ e }}</p>
                    {% endfor %}
                {% endif %}
                {{ form.author(class_='form-control') }}
            </div>
            <input class="btn btn-primary" type="submit" value="Submit">
        </form>
    </div>
{% endblock %}

{% block js %}
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<script>
    CKEDITOR.replace('editor');

    $(function () {
        $("#image_group").hide();
        $("#video_group").hide();
        $("#author_group").hide();

        $("#type").on("change", function () {
            switch ($(this).val()) {
                case "blog":
                    $("#text_group").show();
                    $("#image_group").hide();
                    $("#video_group").hide();
                    $("#author_group").hide();
                    break;
                case "image":
                    $("#text_group").hide();
                    $("#image_group").show();
                    $("#video_group").hide();
                    $("#author_group").hide();
                    break;
                case "video":
                    $("#text_group").hide();
                    $("#image_group").hide();
                    $("#video_group").show();
                    $("#author_group").hide();
                    break;
                case "quote":
                    $("#text_group").show();
                    $("#image_group").hide();
                    $("#video_group").hide();
                    $("#author_group").show();
                    break;
            }
        });
    })
</script>
{% endblock %}